
<template>
  <div class="officialRoot">
    <img class="listCover" :src="tableData.coverImgUrl||cover " @click="handleMoreclick(tableData.id||listId)" alt="">
    <div class="listContainer">
      <slot name="header"></slot>
      <ul class="list">
        <li class="item" @dblclick="handleDbClick(v.id ,i,tableData.id || listId)" @click="handleRowClick" v-for="(v,i) in list" :key="v.id">
          <span class="index">
            {{i+1}}
          </span>
          <div class="name  txtover">{{v.name}}</div>
          <span class="singer">{{v.ar[0].name}}</span>
        </li>
      </ul>
      <div class="bottom">
        查看全部 <i class="iconfont icon-arrow-right-bold"></i>
      </div>
    </div>
  </div>

</template>

<script>
import { computed } from 'vue'
export default {
  name: 'listTable',
  props: {
    tableData: {
      type: Object,
      default() {
        return {}
      }
    },
    cover: {
      type: String,
      default: ''
    },
    listId: {
      type: [String, Number],
      default: ''
    },
    isCheckAllShow: {
      type: Boolean,
      default: true
    },
    topSongs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup(p, { emit }) {
    const handleRowClick = e => {
      const path = e.path[1]
      if (path.tagName === 'LI') {
        emit('handleRowClick', path)
      }
    }
    const handleMoreClick = id => {
      if (id) {
        emit('handleMoreClick', id)
      }
    }
    const handleDbClick = (id, i, listId) => {
      emit('handleDbClick', {
        id,
        index: i,
        listId
      })
    }
    return {
      list: computed(() => {
        return p.tableData.tracks || p.tableData.songs || p.topSongs
      }),
      handleMoreClick,
      handleDbClick,
      handleRowClick
    }
  }
}
</script>

<style scoped>
.officialRoot {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}
.listCover {
  margin-right: 20px;
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.listContainer {
  width: calc(100% - 180px);
}
.list {
  width: 100%;
  /* position: relative; */
  line-height: 30px;
  border-radius: 5px;
  overflow: hidden;
  font-size: 12px;
}
.item {
  position: relative;
  display: flex;

  height: 30px;
  cursor: pointer;
}
.item:nth-child(odd) {
  background-color: var(--odd);
}
.item:hover {
  background-color: var(--hover);
}
.index {
  width: 30px;
  text-align: center;
}
.name {
  width: 80%;
}
.singer {
  position: absolute;
  top: 0;
  right: 10px;
}
.bottom {
  margin-left: 15px;
  display: flex;
  align-items: center;
  font-size: 12px;
  height: 30px;
  cursor: pointer;
}
.item.selectRow {
  background-color: var(--purple);
  color: #fff;
}
</style>